<template>
  <div class="appmanage-container">
      <div id="sreachID" class="modular">
        <div class="sreach">
          <input type="text" placeholder="请输入房间ID" class="search-input"  @blur="closeMask"
                             v-model.trim="roomid"  @focus="openMask"  @keyup.enter="searchHandle()" />
          <a href="javascript:void(0)" class="mui-icon mui-icon-search addhover"
          @click="searchHandle"></a>
        </div>
      </div>
      <!-- search mask -->
      <div class="content-mask" v-if="isOpen"></div>

      <div class="appmanage-inner-container">
        <h3>余额：{{accountCoin}}</h3>
      </div>

      <div class="detail-container" style="margin-bottom:10px;">
        <ul class="detail-items-ul">
          <div v-for="(brl,index) in conversionData" :key="index" class='room-manage-list-wapper'>
            <li class="detail-items-li" v-for="(cd, index) in brl.converData" :key="index">
              <div class="base-info-wapper" v-if="cd.key !== 'roomId'">
                <ul class="base-info-ul">
                  <li class="base-info-li" style="height: auto;">
                    <div class="label-modules textarea-modules" style="width:100%;">{{cd.key}}</div>
                    <div class="textarea-value-modules" style='margin-bottom:4px' v-html="cd.value"></div>
                  </li>
                </ul>
              </div>
            </li>
          </div>
        </ul>
      </div>

      <div class="handler-container">
        <mt-button size="large" type="primary" v-for='(cl, index) in compButtonList'  :key="index"
                  v-if="compButtonList.length  > 0" @click="gameHandler(cl.compValue)" style="margin-top:15px;">{{ cl.compInnerText }}</mt-button>

        <p v-for='(cl, index) in compLabelList'  :key="index"
                  v-if="compLabelList.length  > 0" class="hander-label" style="margin-top:15px;">{{ cl.compInnerText }}</p>
      </div>
  </div>
</template>

<script>
import common from '../../common/common';
import { Toast, Indicator } from 'mint-ui';
import '../../assets/list-style.css';
export default {
  name:'Home',
  data () {
    return {
      roomid:'',
      isOpen:false,
      timer: null,
      conversionData:[],
      compName:null,
      compNameConf: ['btn', 'label'],
      compValue: null,
      handlerRoomid: null,
      accountCoin: null,
      componentList:[],
      compButtonList: [],
      compLabelList:[]
    };
  },
  mounted () {
    common.request('getUserInfo', {...common.params}).then(res=>{
      if(res.data.code > 0){
        this.accountCoin = res.data.data.coin;
      } else {
        Toast(res.data.msg);
      }
    });
  },
  methods:{
    searchHandle () {
      if(!common.isNumber(this.roomid)) return Toast({message: '请输入数字', position: 'bottom'});
      this.readGameList(this.roomid);
    },
    openMask () {
      this.isOpen = true;
    },
    closeMask () {
      this.isOpen = false;
      this.searchHandle();
    },
    readGameList (roomid) {
      const params = {
        ...common.params
      };
      Indicator.open();
      common.request('getGameByRoomId', params, roomid).then(res=>{
        if(res.data.code > 0){
          var $data = res.data.data;
          this.resolveData($data);
        } else {
          Toast({message: res.data.msg, position: 'bottom'});
        }
        Indicator.close();
      });
    },
    componentsNameFilter (keyName) {
      for(var i = 0; i < this.compNameConf.length; i++){
        if(~keyName.indexOf(this.compNameConf[i])){
          return true;
        }
      }
      return false;
    },
    resolveComponent (compText, compValue) {
      // this.compName = compText.split('_')[0];
      // this.compInnerText = compText.split('_')[1];
      // this.compValue = compValue;
      this.componentList.push({
        compName: compText.split('_')[0],
        compInnerText: compText.split('_')[1],
        compValue: compValue
      });
    },
    resolveData ($data) {
      this.conversionData = [];
      this.componentList = [];
      // 模拟测试
      // $data['btn_手动模式控制'] = 'adminCtrlType(1';
      this.handlerRoomid = $data.roomId || null;
      var arr = [];
      for(var k in $data){
        if(this.componentsNameFilter(k)){
          this.resolveComponent(k, $data[k]);
        } else {
          arr.push({
            key: k,
            value: $data[k].toString()
          });
        }
      }
      this.conversionData.push({
        converData: arr
      });

      this.$store.commit('home/SET_VALUE', {
        title: `${$data.name} - ${this.accountCoin}`
      });
      this.compButtonList = this.componentList.filter(f=>{ return f.compName == 'btn'; });
      this.compLabelList = this.componentList.filter(f=>{ return f.compName == 'label'; });
    },
    gameHandler (compValue) {
      const params = {
        ...common.params,
        args: compValue
      };
      // return console.log(this.handlerRoomid);
      common.request('gameOperation', params, this.handlerRoomid).then(res=>{
        if(res.data.code > 0){
          this.resolveData(res.data.data);
        }
      });
    }
  }
};
</script>

<style scoped>
  @import url('./index.css');
  .appmanage-container{
    width: 100%;
    height: auto;
  }
  .content-mask{
      position: fixed;
      right: 0;
      top: 0;
      width: 100%;
      z-index: 1;
      height: 100%;
      background: rgba(0,0,0,0);
  }
  .handler-container{
    padding: 10px;
  }
  .handler-container .hander-label{
    text-align: center;
  }
</style>
